<!--
 * @Author: weikang
 * @Description:
 * @Date: 2023-12-22 23:13:35
 * @LastEditTime: 2024-04-09 23:56:06
 * @FilePath: \env-manager-pc\src\views\system\config\index.vue
-->
<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import Edit from './edit.vue'
import entApi from '@/api/modules/ent'
import { changeChildren } from '@/utils/dataHook'
import type { doLoading } from '@/types/page'
import { ModelType } from '@/types/common'

const tableData = ref<any>([])
const loading = ref(false)
const route = useRoute()

const isOwnerOrg = computed(() => {
  return route.name === 'config-ownerOrg'
})

function getTableData() {
  isOwnerOrg.value
    ? entApi.GetOwnerOrgs().then((res) => {
      tableData.value = changeChildren(res)
    })
    : entApi.GetEnvOrgs().then((res) => {
      tableData.value = changeChildren(res)
    })
}

getTableData()
const editRef = ref()

function toEdit(row: any) {
  editRef.value.open({
    data: {
      data: {
        Name: row.Name,
        FullName: row.FullName,
        Code: row.Code,
      },
    },
    type: ModelType.edit,
  })
}

function toCreate() {
  editRef.value.open({
    type: ModelType.add,
  })
}

function toCreateChild(row: any) {
  editRef.value.open({
    type: ModelType.add,
    data: {
      parentId: row.Code,
    },
  })
}
async function submitEdit(formData: any, checkKeys: string[], doLoading: doLoading) {
  try {
    doLoading(true)
    const Code = formData[isOwnerOrg.value ? 'ownerOrg' : 'envOrg'].Code
    if (isOwnerOrg.value) {
      const ownData = !Code
        ? await entApi.AddOwnerOrg(formData)
        : await entApi.UpdateOwnerOrg({
          ownerOrgObjID: Code,
          ownerOrg: formData.ownerOrg,
        })
      await entApi.SetOwnerOrgUsableEnvOrg({ ownerOrgObjID: ownData.Code, envOrgObjIDs: checkKeys })
    }
    else {
      const envData = !Code
        ? await entApi.AddEnvOrg(formData)
        : await entApi.UpdateEnvOrg({
          envOrgObjID: Code,
          envOrg: formData.envOrg,
        })
      await entApi.SetEnvOrgUsableOwnerOrg({ envOrgObjID: envData.Code, ownerOrgObjIDs: checkKeys })
    }

    getTableData()
    editRef.value.close()
    ElMessage.success({
      message: !Code ? '新增成功' : '编辑成功',
      type: 'success',
    })
  }
  catch (e) {
    doLoading(false)
  }
}

async function toDel(row: any) {
  await ElMessageBox.confirm(`确定删除 ${row.Name} 吗？`, '提示', {
    type: 'warning',
  })
  if (isOwnerOrg.value) {
    await entApi.DeleteOwnerOrg({ ownerOrgObjID: row.Code })
  }
  else {
    await entApi.DeleteEnvOrg({ envOrgObjID: row.Code })
  }
  ElMessage.success({
    message: '删除成功',
    type: 'success',
  })
  getTableData()
}
</script>

<template>
  <div>
    <PageHeader>
      <template #content>
        <ElForm label-width="100">
          <ElRow>
            <!-- <ElCol :span="6">
              <ElFormItem label="管理机构">
                <ElSelect class="w-full">
                  <ElOption label="企业1" value="1" />
                  <ElOption label="企业2" value="2" />
                </ElSelect>
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="企业名称">
                <ElInput />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="设备名称">
                <ElInput />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="在线状态">
                <ElSelect class="w-full">
                  <ElOption label="企业1" value="1" />
                  <ElOption label="企业2" value="2" />
                </ElSelect>
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="运维公司">
                <ElSelect class="w-full">
                  <ElOption label="企业1" value="1" />
                  <ElOption label="企业2" value="2" />
                </ElSelect>
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="设备编码">
                <ElInput />
              </ElFormItem>
            </ElCol> -->
            <ElCol :span="6" :push="18" class="flex flex-justify-end">
              <ElButton type="success" @click="toCreate">
                新增
              </ElButton>
            </ElCol>
          </ElRow>
        </ElForm>
      </template>
    </PageHeader>
    <PageMain>
      <div v-auto-height="85">
        <vxe-table
          auto-resize border
          height="100%"
          :data="tableData"
          :loading="loading"
          :row-config="{ isCurrent: true, keyField: 'Code' }"
          :column-config="{ resizable: true }"
          :tree-config="{ rowField: 'Code', reserve: true }"
        >
          <VxeColumn type="seq" title="序号" width="80" />
          <VxeColumn field="Name" title="名称" min-width="140" show-overflow tree-node />
          <VxeColumn field="operate" title="操作" width="200" fixed="right">
            <template #default="{ row }">
              <ElButton type="success" link @click="toCreateChild(row)">
                新增下级
              </ElButton>
              <ElButton type="primary" link @click="toEdit(row)">
                编辑
              </ElButton>
              <ElButton type="danger" link @click="toDel(row)">
                删除
              </ElButton>
            </template>
          </VxeColumn>
        </vxe-table>
      </div>
    </PageMain>
    <Edit ref="editRef" :is-owner-org="isOwnerOrg" @submit="submitEdit" />
  </div>
</template>
